<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>已完成任务 - TodoList</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="miniprogram-container">
        <div class="page">
            <!-- 头部导航 -->
            <header class="header">
                <div class="flex flex-between">
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="goBack()">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <div>
                            <h1 class="header-title">✅ 已完成</h1>
                            <p class="header-subtitle">COMPLETED TASKS</p>
                        </div>
                    </div>
                    <div class="flex" style="gap: 8px;">
                        <button class="btn btn-secondary" onclick="toggleView()">
                            <i class="fas fa-th-list" id="viewIcon"></i>
                        </button>
                        <button class="btn btn-secondary" onclick="clearCompleted()">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 成就统计 -->
            <div class="card card-glow-green animate-slide-up">
                <div class="flex flex-between" style="margin-bottom: 16px;">
                    <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🏆 成就统计</h4>
                    <span class="priority-badge priority-green" style="font-size: 10px;">ACHIEVEMENTS</span>
                </div>
                
                <div class="stats-grid" style="margin: 0; grid-template-columns: repeat(4, 1fr); gap: 12px;">
                    <div class="stat-card stat-green">
                        <div class="stat-number">18</div>
                        <div class="stat-label">已完成</div>
                    </div>
                    <div class="stat-card stat-blue">
                        <div class="stat-number">5</div>
                        <div class="stat-label">连续天数</div>
                    </div>
                    <div class="stat-card stat-orange">
                        <div class="stat-number">75%</div>
                        <div class="stat-label">完成率</div>
                    </div>
                    <div class="stat-card stat-cyan">
                        <div class="stat-number">12</div>
                        <div class="stat-label">本周完成</div>
                    </div>
                </div>
                
                <!-- 进度条 -->
                <div style="margin-top: 16px;">
                    <div class="flex flex-between" style="margin-bottom: 8px; font-size: 12px;">
                        <span style="color: var(--text-secondary);">距离下个成就</span>
                        <span style="color: var(--accent-green); font-weight: bold;">18/20</span>
                    </div>
                    <div style="width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                        <div style="width: 90%; height: 100%; background: linear-gradient(90deg, var(--accent-green), #32d74b); box-shadow: 0 0 15px var(--accent-green-glow);"></div>
                    </div>
                    <div style="font-size: 10px; color: var(--text-tertiary); margin-top: 4px; text-align: center;">
                        🎯 再完成2个任务解锁"任务达人"徽章
                    </div>
                </div>
            </div>

            <!-- 筛选选项 -->
            <div class="card animate-slide-up" style="animation-delay: 0.1s;">
                <div class="flex flex-between" style="margin-bottom: 12px;">
                    <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🔍 筛选选项</h4>
                </div>
                
                <div class="flex" style="gap: 8px; flex-wrap: wrap; margin-bottom: 12px;">
                    <button class="btn btn-primary filter-btn active" data-filter="all">全部</button>
                    <button class="btn btn-secondary filter-btn" data-filter="today">今天</button>
                    <button class="btn btn-secondary filter-btn" data-filter="week">本周</button>
                    <button class="btn btn-secondary filter-btn" data-filter="month">本月</button>
                </div>
                
                <div class="flex" style="gap: 8px; flex-wrap: wrap;">
                    <button class="btn btn-secondary priority-filter" data-priority="high">高优先级</button>
                    <button class="btn btn-secondary priority-filter" data-priority="medium">中优先级</button>
                    <button class="btn btn-secondary priority-filter" data-priority="low">低优先级</button>
                </div>
            </div>

            <!-- 已完成任务列表 -->
            <div class="flex-1" style="overflow-y: auto; padding-bottom: 100px;">
                
                <!-- 今天完成的任务 -->
                <div class="card animate-slide-up" style="animation-delay: 0.2s;">
                    <div class="flex flex-between" style="margin-bottom: 16px;">
                        <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-green);">📅 今天 (3个)</h4>
                        <span style="font-size: 12px; color: var(--text-secondary);">2024-01-15</span>
                    </div>
                    
                    <!-- 任务项 -->
                    <div class="completed-task" data-priority="high" data-date="today">
                        <div class="flex" style="gap: 12px; align-items: flex-start;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                <i class="fas fa-check"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                    🔥 完成项目报告
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                    整理了所有数据并制作了详细的图表展示，包含用户反馈分析
                                </div>
                                <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                    <div class="flex" style="gap: 12px;">
                                        <span><i class="fas fa-clock" style="margin-right: 4px;"></i>16:45 完成</span>
                                        <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 3.5h</span>
                                    </div>
                                    <div class="priority-badge priority-high" style="font-size: 8px;">HIGH</div>
                                </div>
                            </div>
                            <button class="btn btn-secondary" onclick="restoreTask('1')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                <i class="fas fa-undo"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="completed-task" data-priority="medium" data-date="today" style="margin-top: 16px;">
                        <div class="flex" style="gap: 12px; align-items: flex-start;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                <i class="fas fa-check"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                    📚 学习新技能
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                    完成了在线课程第3章的学习，掌握了新的编程技巧
                                </div>
                                <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                    <div class="flex" style="gap: 12px;">
                                        <span><i class="fas fa-clock" style="margin-right: 4px;"></i>14:20 完成</span>
                                        <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 2h</span>
                                    </div>
                                    <div class="priority-badge priority-medium" style="font-size: 8px;">MEDIUM</div>
                                </div>
                            </div>
                            <button class="btn btn-secondary" onclick="restoreTask('2')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                <i class="fas fa-undo"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="completed-task" data-priority="low" data-date="today" style="margin-top: 16px;">
                        <div class="flex" style="gap: 12px; align-items: flex-start;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                <i class="fas fa-check"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                    🛒 购买生活用品
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                    买了牙膏、洗发水、纸巾等必需品，还顺便买了点零食
                                </div>
                                <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                    <div class="flex" style="gap: 12px;">
                                        <span><i class="fas fa-clock" style="margin-right: 4px;"></i>10:30 完成</span>
                                        <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 1h</span>
                                    </div>
                                    <div class="priority-badge priority-low" style="font-size: 8px;">LOW</div>
                                </div>
                            </div>
                            <button class="btn btn-secondary" onclick="restoreTask('3')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                <i class="fas fa-undo"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 昨天完成的任务 -->
                <div class="card animate-slide-up" style="animation-delay: 0.3s;">
                    <div class="flex flex-between" style="margin-bottom: 16px;">
                        <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-blue);">📅 昨天 (2个)</h4>
                        <span style="font-size: 12px; color: var(--text-secondary);">2024-01-14</span>
                    </div>
                    
                    <div class="completed-task" data-priority="high" data-date="yesterday">
                        <div class="flex" style="gap: 12px; align-items: flex-start;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                <i class="fas fa-check"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                    💼 客户会议准备
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                    准备了完整的演示文稿和产品demo，会议进行得很顺利
                                </div>
                                <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                    <div class="flex" style="gap: 12px;">
                                        <span><i class="fas fa-clock" style="margin-right: 4px;"></i>18:00 完成</span>
                                        <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 4h</span>
                                    </div>
                                    <div class="priority-badge priority-high" style="font-size: 8px;">HIGH</div>
                                </div>
                            </div>
                            <button class="btn btn-secondary" onclick="restoreTask('4')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                <i class="fas fa-undo"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="completed-task" data-priority="medium" data-date="yesterday" style="margin-top: 16px;">
                        <div class="flex" style="gap: 12px; align-items: flex-start;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                <i class="fas fa-check"></i>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                    🏃‍♂️ 健身计划
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                    完成了45分钟的有氧运动，感觉状态很好
                                </div>
                                <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                    <div class="flex" style="gap: 12px;">
                                        <span><i class="fas fa-clock" style="margin-right: 4px;"></i>19:30 完成</span>
                                        <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 45min</span>
                                    </div>
                                    <div class="priority-badge priority-medium" style="font-size: 8px;">MEDIUM</div>
                                </div>
                            </div>
                            <button class="btn btn-secondary" onclick="restoreTask('5')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                <i class="fas fa-undo"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 本周早些时候 -->
                <div class="card animate-slide-up" style="animation-delay: 0.4s;">
                    <div class="flex flex-between" style="margin-bottom: 16px;">
                        <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-orange);">📅 本周早些时候 (5个)</h4>
                        <button class="btn btn-secondary" onclick="toggleWeekTasks()" style="padding: 4px 8px; font-size: 10px;">
                            <i class="fas fa-chevron-down" id="weekToggle"></i>
                        </button>
                    </div>
                    
                    <div id="weekTasks" class="hidden">
                        <div class="completed-task" data-priority="high" data-date="week">
                            <div class="flex" style="gap: 12px; align-items: flex-start;">
                                <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin-top: 4px; box-shadow: 0 0 15px var(--accent-green-glow);">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div style="flex: 1;">
                                    <div style="font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">
                                        📋 周计划制定
                                    </div>
                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
                                        制定了详细的本周工作计划和目标
                                    </div>
                                    <div class="flex flex-between" style="font-size: 11px; color: var(--text-tertiary);">
                                        <div class="flex" style="gap: 12px;">
                                            <span><i class="fas fa-calendar" style="margin-right: 4px;"></i>周一</span>
                                            <span><i class="fas fa-stopwatch" style="margin-right: 4px;"></i>用时 1.5h</span>
                                        </div>
                                        <div class="priority-badge priority-high" style="font-size: 8px;">HIGH</div>
                                    </div>
                                </div>
                                <button class="btn btn-secondary" onclick="restoreTask('6')" style="padding: 6px; font-size: 12px;" title="恢复任务">
                                    <i class="fas fa-undo"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 更多历史任务... -->
                        <div style="text-align: center; margin-top: 16px; padding: 16px; color: var(--text-tertiary); font-size: 12px;">
                            <i class="fas fa-ellipsis-h"></i>
                            <div style="margin-top: 4px;">还有4个已完成任务</div>
                            <button class="btn btn-secondary" onclick="loadMoreTasks()" style="margin-top: 8px; font-size: 10px; padding: 6px 12px;">
                                查看更多
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div id="emptyState" class="hidden text-center" style="padding: 60px 20px;">
                    <div style="font-size: 48px; margin-bottom: 16px; opacity: 0.5;">✅</div>
                    <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary);">暂无已完成任务</div>
                    <div style="font-size: 14px; color: var(--text-tertiary);">完成一些任务后，它们会出现在这里</div>
                </div>
            </div>

            <!-- 底部导航 -->
            <nav class="bottom-nav">
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-home"></i></div>
                    <div class="nav-label">主页</div>
                </a>
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-user"></i></div>
                    <div class="nav-label">我的</div>
                </a>
            </nav>
        </div>
    </div>

    <script>
        let currentView = 'list'; // list 或 grid

        // 返回上一页
        function goBack() {
            console.log('返回上一页');
            showToast('返回上一页', 'info');
        }

        // 切换视图
        function toggleView() {
            const icon = document.getElementById('viewIcon');
            if (currentView === 'list') {
                currentView = 'grid';
                icon.className = 'fas fa-th';
                showToast('切换到网格视图', 'info');
            } else {
                currentView = 'list';
                icon.className = 'fas fa-th-list';
                showToast('切换到列表视图', 'info');
            }
        }

        // 清空已完成任务
        function clearCompleted() {
            if (confirm('确定要清空所有已完成任务吗？此操作不可恢复。')) {
                showToast('已清空所有已完成任务', 'danger');
                // 这里可以实现清空逻辑
            }
        }

        // 恢复任务
        function restoreTask(taskId) {
            showToast('任务已恢复到待办列表', 'success');
            console.log('恢复任务:', taskId);
            // 这里可以实现恢复逻辑
        }

        // 切换本周任务显示
        function toggleWeekTasks() {
            const weekTasks = document.getElementById('weekTasks');
            const toggle = document.getElementById('weekToggle');
            
            if (weekTasks.classList.contains('hidden')) {
                weekTasks.classList.remove('hidden');
                toggle.className = 'fas fa-chevron-up';
            } else {
                weekTasks.classList.add('hidden');
                toggle.className = 'fas fa-chevron-down';
            }
        }

        // 加载更多任务
        function loadMoreTasks() {
            showToast('正在加载更多任务...', 'info');
            
            setTimeout(() => {
                showToast('已加载更多历史任务', 'success');
                // 这里可以实现加载更多的逻辑
            }, 1000);
        }

        // 筛选功能
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的激活状态
                document.querySelectorAll('.filter-btn').forEach(b => {
                    b.classList.remove('btn-primary', 'active');
                    b.classList.add('btn-secondary');
                });
                
                // 激活当前按钮
                this.classList.remove('btn-secondary');
                this.classList.add('btn-primary', 'active');
                
                const filter = this.dataset.filter;
                filterTasks(filter);
            });
        });

        // 优先级筛选
        document.querySelectorAll('.priority-filter').forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.classList.contains('btn-primary')) {
                    // 如果已激活，则取消激活
                    this.classList.remove('btn-primary');
                    this.classList.add('btn-secondary');
                    filterByPriority(null);
                } else {
                    // 先取消其他按钮的激活状态
                    document.querySelectorAll('.priority-filter').forEach(b => {
                        b.classList.remove('btn-primary');
                        b.classList.add('btn-secondary');
                    });
                    
                    // 激活当前按钮
                    this.classList.remove('btn-secondary');
                    this.classList.add('btn-primary');
                    
                    const priority = this.dataset.priority;
                    filterByPriority(priority);
                }
            });
        });

        // 按时间筛选任务
        function filterTasks(timeFilter) {
            const tasks = document.querySelectorAll('.completed-task');
            const cards = document.querySelectorAll('.card');
            
            if (timeFilter === 'all') {
                // 显示所有任务
                cards.forEach(card => {
                    if (card.querySelector('.completed-task')) {
                        card.style.display = 'block';
                    }
                });
                tasks.forEach(task => task.style.display = 'flex');
                showToast('显示所有已完成任务', 'info');
            } else {
                // 根据时间筛选
                cards.forEach(card => {
                    if (card.querySelector('.completed-task')) {
                        card.style.display = 'none';
                    }
                });
                
                tasks.forEach(task => {
                    const taskDate = task.dataset.date;
                    if (taskDate === timeFilter || 
                        (timeFilter === 'week' && ['today', 'yesterday', 'week'].includes(taskDate))) {
                        task.style.display = 'flex';
                        task.closest('.card').style.display = 'block';
                    } else {
                        task.style.display = 'none';
                    }
                });
                
                const filterText = {
                    'today': '今天',
                    'week': '本周',
                    'month': '本月'
                };
                showToast(`显示${filterText[timeFilter]}的已完成任务`, 'info');
            }
        }

        // 按优先级筛选任务
        function filterByPriority(priority) {
            const tasks = document.querySelectorAll('.completed-task');
            
            if (!priority) {
                // 显示所有优先级
                tasks.forEach(task => {
                    if (task.style.display !== 'none') {
                        task.style.display = 'flex';
                    }
                });
                showToast('显示所有优先级任务', 'info');
            } else {
                tasks.forEach(task => {
                    const taskPriority = task.dataset.priority;
                    if (taskPriority === priority) {
                        task.style.display = 'flex';
                    } else {
                        task.style.display = 'none';
                    }
                });
                
                const priorityText = {
                    'high': '高优先级',
                    'medium': '中优先级',
                    'low': '低优先级'
                };
                showToast(`显示${priorityText[priority]}任务`, 'info');
            }
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            const colors = {
                success: { bg: 'var(--accent-green)', glow: 'var(--accent-green-glow)' },
                danger: { bg: 'var(--accent-red)', glow: 'var(--accent-red-glow)' },
                info: { bg: 'var(--accent-blue)', glow: 'var(--accent-blue-glow)' }
            };
            
            const color = colors[type] || colors.success;
            
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: ${color.bg};
                color: white;
                padding: 12px 24px;
                border-radius: var(--radius-md);
                font-size: 14px;
                font-weight: 600;
                z-index: 10000;
                box-shadow: 0 0 30px ${color.glow};
                animation: fadeIn 0.3s ease;
            `;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加任务项动画效果
            const tasks = document.querySelectorAll('.completed-task');
            tasks.forEach((task, index) => {
                setTimeout(() => {
                    task.style.opacity = '0';
                    task.style.transform = 'translateX(-20px)';
                    task.style.transition = 'all 0.3s ease';
                    
                    setTimeout(() => {
                        task.style.opacity = '1';
                        task.style.transform = 'translateX(0)';
                    }, 100);
                }, index * 100 + 500);
            });

            // 添加统计卡片动画
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.transform = 'scale(1.05)';
                    setTimeout(() => {
                        card.style.transform = 'scale(1)';
                    }, 200);
                }, index * 100 + 300);
            });
        });

        // 添加动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            .completed-task {
                transition: all 0.3s ease;
            }
            .completed-task:hover {
                background: var(--bg-primary);
                border-radius: var(--radius-md);
                padding: 12px;
                margin: -12px;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 